<template>
  <section class="checkout-section pt-100 pb-70">
    <div class="container">
      <div
        class="product-info-header product-info-header-three product-info-header-borderless"
      >
        <h2>Checkout</h2>
        <a
          href="javascript:;"
          class="btn main-btn main-btn-secondary m-0"
          @click="() => $jumpLink('/shop/shop-cart')"
        >
          Back To Cart
        </a>
      </div>
      <div class="row">
        <div class="col-lg-7 pb-30">
          <div class="checkout-box desk-pad-right-30">
            <div class="sub-section-title">
              <h3 class="sub-section-title-heading">Billing Details</h3>
            </div>
            <div class="checkout-form">
              <form>
                <div class="row">
                  <div class="col-sm-6">
                    <div class="form-group mb-20">
                      <label>Email</label>
                      <input
                        type="text"
                        name="email"
                        class="form-control form-control-background-white"
                        required=""
                        placeholder="Email address*"
                      />
                    </div>
                  </div>
                  <div class="col-sm-6">
                    <div class="form-group mb-20">
                      <label>Phone</label>
                      <input
                        type="text"
                        name="phone"
                        class="form-control form-control-background-white"
                        required=""
                        placeholder="Phone number*"
                      />
                    </div>
                  </div>
                  <div class="col-sm-12">
                    <div
                      class="input-checkbox input-checkbox-secondcolor mb-20"
                    >
                      <input type="checkbox" id="check1" />
                      <label for="check1"
                        >Get alert of product updates &amp; offers</label
                      >
                    </div>
                  </div>
                  <div class="col-sm-6">
                    <div class="form-group mb-20">
                      <label>First Name</label>
                      <input
                        type="email"
                        name="name"
                        class="form-control form-control-background-white"
                        required=""
                        placeholder="First name*"
                      />
                    </div>
                  </div>
                  <div class="col-sm-6">
                    <div class="form-group mb-20">
                      <label>Last Name</label>
                      <input
                        type="email"
                        name="name"
                        class="form-control form-control-background-white"
                        required=""
                        placeholder="Last name*"
                      />
                    </div>
                  </div>
                  <div class="col-sm-12">
                    <div class="form-group mb-20">
                      <label>Your Country</label>
                      <select
                        name="country"
                        class="form-control form-control-background-white"
                      >
                        <option value="1">Your country*</option>
                        <option value="2">USA</option>
                        <option value="3">UK</option>
                        <option value="4">Germany</option>
                      </select>
                    </div>
                  </div>
                  <div class="col-sm-12">
                    <div class="form-group mb-20">
                      <label>Company Name</label>
                      <input
                        type="text"
                        name="company-name"
                        class="form-control form-control-background-white"
                        placeholder="Company name"
                      />
                    </div>
                  </div>
                  <div class="col-sm-12">
                    <div class="form-group mb-20">
                      <label>Address</label>
                      <input
                        type="text"
                        name="company-name"
                        class="form-control form-control-background-white"
                        placeholder="Address"
                      />
                    </div>
                  </div>
                  <div class="col-sm-12">
                    <div class="form-group mb-20">
                      <label>Town/City</label>
                      <select
                        name="country"
                        class="form-control form-control-background-white"
                      >
                        <option value="1">Town/City*</option>
                        <option value="2">USA</option>
                        <option value="3">UK</option>
                        <option value="4">Germany</option>
                      </select>
                    </div>
                  </div>
                  <div class="col-sm-12 col-lg-6">
                    <div class="form-group mb-20">
                      <label>State / Country</label>
                      <input
                        type="text"
                        name="state-country"
                        class="form-control form-control-background-white"
                        required=""
                        placeholder="State / Country*"
                      />
                    </div>
                  </div>
                  <div class="col-sm-12 col-lg-6">
                    <div class="form-group mb-20">
                      <label>Postcode / Zip</label>
                      <input
                        type="email"
                        name="postcode-zip"
                        class="form-control form-control-background-white"
                        required=""
                        placeholder="Postcode / Zip*"
                      />
                    </div>
                  </div>
                  <div class="col-sm-12">
                    <div
                      class="input-checkbox input-checkbox-secondcolor mb-20"
                    >
                      <input type="checkbox" id="check2" />
                      <label for="check2" class="weight-600"
                        >Ship to a different address?</label
                      >
                    </div>
                  </div>
                  <div class="col-sm-12">
                    <div class="form-group m-0">
                      <label>Order Notes</label>
                      <textarea
                        name="order"
                        class="form-control form-control-background-white"
                        rows="10"
                        placeholder="Order notes*"
                      ></textarea>
                    </div>
                  </div>
                </div>
              </form>
            </div>
          </div>
        </div>
        <div class="col-lg-5 pb-30">
          <div class="checkout-item">
            <div class="sub-section-title">
              <h3 class="sub-section-title-heading">Order Summary</h3>
            </div>
            <div class="cart-details">
              <div class="cart-total-box cart-total-box-secondcolor mb-30">
                <div class="cart-total-item">
                  <h4 class="checkout-total-title">Product Name</h4>
                  <p class="checkout-total-title">Total</p>
                </div>
                <template v-for="(item, index) in checkoutList" :key="index">
                  <div class="cart-total-item">
                    <div class="cart-total-item-info">
                      <div class="product-table-thumb">
                        <div class="cart-product-number">
                          {{ item.quantity }}
                        </div>
                        <img
                          :src="
                            require('assets/images/products/product-14.png')
                          "
                          alt="product"
                        />
                      </div>
                      <h4>{{ item.title }}</h4>
                    </div>
                    <p>{{ item.currentPrice * item.quantity }}</p>
                  </div>
                </template>
              </div>
              <div class="cart-total-box cart-total-box-secondcolor mb-30">
                <div class="cart-total-item">
                  <h4>Subtotal</h4>
                  <p>{{ total }}</p>
                </div>
                <div class="cart-total-item">
                  <h4>
                    Vat <span>({{ vat.value }}%)</span>
                  </h4>
                  <p>{{ total * (vat.value / 100) }}</p>
                </div>
                <div class="cart-total-item">
                  <h4>Total</h4>
                  <p>{{ total + total * (vat.value / 100) }}</p>
                </div>
              </div>
            </div>
            <div class="checkout-box checkout-payment-area">
              <div class="sub-section-title">
                <h3 class="sub-section-title-heading">What's Payment Method</h3>
              </div>
              <div class="checkout-payment-form">
                <form>
                  <div class="input-checkbox input-checkbox-secondcolor mb-20">
                    <input type="radio" id="check3" name="payment" />
                    <label for="check3">Bank Transfer</label>
                  </div>
                  <div class="input-checkbox input-checkbox-secondcolor mb-20">
                    <input type="radio" id="check4" name="payment" />
                    <label for="check4">Paypal</label>
                  </div>
                  <div class="input-checkbox input-checkbox-secondcolor mb-20">
                    <input type="radio" id="check5" name="payment" />
                    <label for="check5">Visa</label>
                  </div>
                  <div class="sub-section-title">
                    <h3 class="sub-section-title-heading">Payment</h3>
                  </div>
                  <div class="row">
                    <div class="col-12">
                      <div class="form-group mb-20">
                        <label>Card Holder Name</label>
                        <input
                          type="text"
                          name="email"
                          class="form-control form-control-background-white"
                          required=""
                          placeholder="Name on the card*"
                        />
                      </div>
                    </div>
                    <div class="col-12">
                      <div class="form-group mb-20">
                        <label>Card Number</label>
                        <input
                          type="text"
                          name="email"
                          class="form-control form-control-background-white"
                          required=""
                          placeholder="1234 4567 7890"
                        />
                      </div>
                    </div>
                    <div class="col-sm-6">
                      <div class="form-group mb-20">
                        <label>Card Expire</label>
                        <input
                          type="text"
                          name="number"
                          class="form-control form-control-background-white"
                          required=""
                          placeholder="Card expire*"
                        />
                      </div>
                    </div>
                    <div class="col-sm-6">
                      <div class="form-group mb-20">
                        <label>CVC</label>
                        <input
                          type="text"
                          name="number"
                          class="form-control form-control-background-white"
                          required=""
                          placeholder="123*"
                        />
                      </div>
                    </div>
                    <div class="col-12">
                      <button
                        class="btn main-btn main-btn-secondary full-width"
                        type="submit"
                      >
                        Make Payment
                      </button>
                    </div>
                  </div>
                </form>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
</template>

<script setup>
import {
  reactive,
  toRefs,
  computed,
  onBeforeMount,
  onMounted,
  getCurrentInstance,
  defineComponent,
} from "vue";

// const Component = defineComponent({});

const { proxy } = getCurrentInstance();

const props = defineProps({});

const data = reactive({
  checkoutList: [],
  vat: {
    value: 2,
  },
  total: computed(() => {
    var total = 0;
    for (var i = 0, j = data.checkoutList.length; i < j; i++) {
      total +=
        data.checkoutList[i].currentPrice * data.checkoutList[i].quantity;
    }
    return total;
  }),
});
const { checkoutList, vat, total } = toRefs(data);

onBeforeMount(() => {
  if (
    proxy.$route.params.checkoutListString == undefined &&
    !proxy.$route.params.checkoutListString
  ) {
    proxy.$jumpLink("/shop/shop-cart");
  }
  var checkoutList = JSON.parse(proxy.$route.params.checkoutListString);
  data.checkoutList = checkoutList;
});
onMounted(() => {});

const methods = {};
</script>
<style lang="scss" scoped></style>
